<template>
    <div class="list">
        <div v-for="item in categoryList" :key="item.id">
            <h4>{{ item.name }}</h4>
            <ul>
                <li v-for="item1 in item.goodsList" :key="item1.id" @click="gotoDetail(item1)">
                    <img v-lazy="item1.list_pic_url" alt="">
                    <p>{{ item1.name }}</p>
                    <span>{{ item1.retail_price | formatMoney }}</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name: "",
    props: ["categoryList"],
    data() {
        return {
        };
    },

    components: {},

    computed: {},

    created() {},

    mounted() {},

    methods: {
        gotoDetail(item1){
            console.log(item1);
            this.$router.push({'path':'/productDetail',query:{id:item1.id}});
        }
    },
};
</script>
<style lang="less" scoped>
.list{
    text-align: center;
    padding-bottom: 70px;
    h4{
        height: 75px;
        line-height: 75px;
        font-size: 18px;
        color: black;
        margin-top: 15px;
    }
    ul{
        display: flex;
        flex-wrap: wrap;
        li{
            width: 50%;
            img{
                width: 100%;
            }
            p{
                font-size: 16px;
                margin-bottom: 8px;
            }
            span{
                font-size: 16px;
                color: #8b0000;
            }
        }
    }
}
</style>